<template>
  <el-dialog
    v-toggle-full
    v-loading.lock="loading"
    class="base-dialog"
    :custom-class="'panna-dialog_big'"
    :append-to-body="true"
    title="选择危化品"
    align="center"
    :close-on-click-modal="false"
    :visible.sync="innerDialogFormVisible"
    @closed="closeDialog"
  >
    <el-form ref="queryForm" :inline="true" :model="queryForm">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="编号" prop="productNum">
            <el-input
              v-model="queryForm.productNum"
              placeholder="请输入编号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="queryForm.name"
              placeholder="请输入名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分类" prop="classOneId">
            <BaseTreeSelect
              v-model="queryForm.classOneId"
              :tree-data="categoryTree"
              placeholder="请选择分类"
              clearable
              @node-click="handleNodeClick"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="productList"
      element-loading-text="Loading"
      fit
      highlight-current-row
      :header-cell-style="{ height: '50px' }"
      :cell-style="{ height: '50px', overflow: 'auto' }"
      style="width: 100%; height: auto; overflow: auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="编号">
        <template slot-scope="scope">
          {{ scope.row.productNum }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="别名">
        <template slot-scope="scope">
          {{ scope.row.alias }}
        </template>
      </el-table-column>
      <el-table-column label="型号规格">
        <template slot-scope="scope">
          {{ scope.row.specifications }}
        </template>
      </el-table-column>
      <el-table-column label="包装单位">
        <template slot-scope="scope">
          {{ scope.row.unitName }}
        </template>
      </el-table-column>
      <el-table-column label="CAS号">
        <template slot-scope="scope">
          {{ scope.row.casNum }}
        </template>
      </el-table-column>
      <el-table-column label="分类">
        <template slot-scope="scope">
          {{ scope.row.classOneName }}
        </template>
      </el-table-column>
      <el-table-column label="形态">
        <template slot-scope="scope">
          {{ scope.row.morphologyName }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
      <el-table-column label="实际库存">
        <template slot-scope="scope">
          {{ scope.row.actualStore }}
        </template>
      </el-table-column>
    </el-table>
    <BasePagination
      :total="pagination.total"
      :current-page="pagination.pageIndex"
      :page-count="pagination.total"
      @changePage="changePage"
      @sizeChange="sizeChange"
    />

    <div slot="footer" class="dialog-footer" align="center">
      <el-button @click="closeDialog()">关 闭</el-button>
      <el-button type="primary" @click="confirmSelected()">确认选择</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getList, getTreeData } from "../api/Storage/StorageProduct.js";
import { formatData } from "../utils/index.js";
export default {
  name: "SelectProductListDialog",
  props: {
    dialogProductVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "选择危化品",
      appId: 1000,
      loading: false,
      innerDialogFormVisible: false,
      formData: {
        id: 0,
        orderTypeCode: null,
        storageId: null,
        productNum: null,
        productList: [],
      },
      searchLoading: false,
      queryForm: {
        status: 1,
        productNum: "",
        name: "",
        classOneId: null,
      },
      categoryTree: [],
      productList: [],
      selectionTables: [],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  watch: {},
  created() {
    this.innerDialogFormVisible = this.dialogProductVisible;
    this.init();
  },
  methods: {
    async init() {
      await this.getCategoryOptions();
      await this.getProductList();
    },
    unique(arr, u_key) {
      const map = new Map();
      arr.forEach((item, index) => {
        if (!map.has(item[u_key])) {
          map.set(item[u_key], item);
        }
      });
      return [...map.values()];
    },
    getCategoryOptions() {
      return new Promise((resolve) => {
        getTreeData({ AppId: this.appId, Status: 1 }).then((res) => {
          this.categoryTree = formatData(res.data);
          resolve();
        });
      });
    },
    getProductList() {
      this.loading = true;
      this.productList = [];
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.productList = res.data.dataList
            ? res.data.dataList.map((item) => {
              return {
                ...item,
                value: item.id,
                productId: item.id,
              };
            })
            : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getProductList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getProductList();
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getProductList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getProductList();
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogProductVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
    confirmSelected() {
      if (this.selectionTables.length > 0) {
        this.$emit("confirmSelected", this.selectionTables);
      }
      this.closeDialog();
    },
    handleSelectionChange(val) {
      this.selectionTables = val;
    },
    handleNodeClick(data, node) {
      if (data.id !== null && data.id.length !== 0) {
        this.queryForm.classOneId = data.id;
      }
    },
  },
};
</script>
<style lang="scss">
.storage-order-in-edit {
  .el-table .cell {
    overflow: visible;
  }
}
</style>
